<template>
  <div>
    <ul>
      <li v-for="(item,index) in arr " :key="index">{{item}}</li>
    </ul>
    <button @click = 'revbtn'>反转</button>
    <button @click = 'sbtn'>截取</button>
    <button @click = 'gbtn'>更新单个变量值</button>
  </div>
</template>

<script>
export default {
data(){
  return {
    arr:[1,2,3,4,5,6]
  }
},
// 能够修改原数组的方法都可以改变v-for的渲染值,
methods: {
  revbtn (){
  // 数组reverse 可以改变v-for渲染的值
  this.arr.reverse()
},
sbtn (){
  // 数组的slice截取不会对v-for的渲染值发生改变
  // 解决方法:将截取的值重新赋值给原数组
 const newArr= this.arr.slice(0,4)
 this.arr = newArr
},
gbtn(){
  // 直接修改某个变量值的时候,v-for检测不到,不会进行更改
  // 解决方法:使用this.$set()
  // 参数1:修改的对象
  // 参数2:从什么位置开始
  // 参数3:更改的值
  this.$set(this.arr,0,100)
}
}
}
</script>

<style>

</style>